<template>
  <transition>
    <div class="mine-love" ref='historyRef'>
      <nav-bar>
        <div slot="left" class='back' @click='goBack'>
          <i class="icon-back"></i>
        </div>
        <div slot="center"> 历史歌曲</div>
      </nav-bar>
      <confirm ref="confirmRef" :text='confirmText' @confirm='clearAll' confirmBtnText='清空'></confirm>
      <h1 v-show='historyPlay.length' class='love-icon-wrapper'>
        <span>清空列表</span>
        <span @click='showConfirm'>
          <i class='icon-clear'></i>
        </span>
      </h1>
      <scroll v-if='historyPlay.length' :list='historyPlay' class='content' ref='scrollRef'>
        <div>
          <music-item :songs='historyPlay' />
        </div>
      </scroll>
      <no-result v-else />
    </div>
  </transition>
</template>

<script>
import NavBar from 'components/common/navbar'
import MusicItem from 'components/list/MusicItem'
import Scroll from 'components/base/Scroll'
import Confirm from 'components/base/Confirm'
import NoResult from 'components/result/NoResult'

import { mapState } from 'vuex'

import { playListMixin } from 'common/js/mixin'
export default {
  name: 'mineLoveIndex',
  components: { NavBar, MusicItem, Scroll, Confirm, NoResult },
  mixins: [playListMixin],
  props: {},
  data() {
    return { confirmText: '是否清空所有历史歌曲' }
  },
  computed: {
    ...mapState(['historyPlay'])
  },
  methods: {
    handlePlayList(playlist) {
      const bottom = playlist.length > 0 ? '60px' : ''
      this.$refs.scrollRef.$el.style.bottom = bottom
      this.$refs.scrollRef.refresh()
    },
    goBack() {
      this.$router.back()
    },
    clearAll() {
      this.$store.commit('clearHistoryPlay')
    },
    showConfirm() {
      this.$refs.confirmRef.show()
    },
    selectItem(i) {
      this.$store.commit('setCurrentIndex', i)
      this.$store.commit('setPlayList', this.historyPlay)
      this.$store.commit('setSequenceList', this.historyPlay)
      this.$store.commit('setFullScreen', true)
    }
  }
}
</script>

<style scoped  >
.love-icon-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  color: var(--color-theme);
  height: 30px;
  background: #222;
}

.mine-love {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #222;
}
.content {
  position: absolute;
  overflow: hidden;

  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>